<template>
	<view class="">
		<view v-for="(item,index) in lists" :key="index" class="message_box"  @tap="toDe(item)">
			<view class="job_name">{{item.recruit_job_title}}</view>
			<view v-if="item.job_status==1" class="text-green status">{{item.job_status | getStatus}}</view>
			<view v-if="item.job_status==2" class="text-blue status">{{item.job_status | getStatus}}</view>
			<view v-if="item.job_status==3" class="text-yellow status">{{item.job_status | getStatus}}</view>
			<view v-if="item.job_status==4" class="text-red status">{{item.job_status | getStatus}}</view>
			<view class="money">{{item.salary}}</view>
			<view class="flex flex-wrap m_left_16 tagBox">
			    <view class="tag" v-for="(tag, index) in item.tag_data" :key="index">
			    <view class="cu-tag light radius" :style="'background-color:' + tag.color" style="margin-right: 6px;font-size: 11px;color: #666666;">
			        {{ tag.tag_name }}
			    </view>
			    </view>
			</view>
			<view style="display: flex;margin-top: 6px;color: #999999;font-size: 13px;">
				<view>{{item.city_address}}</view>
				<view style="margin: 0 10px;line-height: 17px;"> | </view>
				<view>{{item.recruit_job_name}}</view>
			</view>
			<view class="constract_box">
				<view><image :src="item.avatar" mode="" style="width: 32px;height: 32px;border-radius: 16px;"></image></view>
				<view style="color: #333333;font-size: 13px;line-height: 32px;margin-left: 8px;">{{item.admin_mobile}}</view>
				<view class="constract_img">
					<image src="../../../static/img/mine/constract_phone.png" mode="" @tap="contactCompany(item.admin_mobile)"></image>
					<!-- <image src="../../../static/img/mine/constract_wx.png" mode="" @tap="$refs.popup.open()"></image> -->
				</view>
			</view>
			<view class="add_time">
				{{item.update_time}}
			</view>
		</view>
		<uni-popup :show="false" type="center" ref="popup" :maskClick="false">
			<view style="background-color: #FFFFFF;width:300px;height: 212px;padding: 0 32px 32px;font-size: 15px;border-radius: 8px;display: flex;flex-direction: column;align-items: center;">
				<view><image src="../../../static/img/mine_invite/wx.png" mode="" style="width: 50px;height: 50px;border-radius: 8px;margin-top: -25px;"></image></view>
				<view style="margin: 20px 0 ; font-size: 17px;color: #333333;">微信号:  <span>DuPiZhi</span></view>
				
				<view style="font-size: 15px;color: #666666;">已复制,去添加经纪人为好友吧</view>
				<view class="close" @tap="$refs.popup.close()">
					我知道了
				</view>
			</view>
			
		</uni-popup>
	</view>
</template>

<script>
	const Page = require('../../../utils/mtj-wx-sdk.js').Page;
	import uniPopup from "@/components/uni-popup/uni-popup.vue";
	export default {
	  name: "messageBox",
	  props: {
	    lists: {
	      type: Array,
	      default: []
	    }
	  },
	  data() {
	    return {
	    };
	  },
	  methods: {
		// 拨打电话
				contactCompany(val){
					uni.makePhoneCall({
					 	phoneNumber: val
					}) 
				},
				toDe(events){
					var event = JSON.stringify(events)
					uni.navigateTo({
						url:'/pages/detail/detail?data='+event
					})
				},
	  },
	  filters:{
	  	  getStatus(val){
	  		if(val=="1") {
	  			return "等待邀请"
	  		}else if(val=="2"){
	  			return "待面试"
	  		}else if(val=="3"){
	  			return "入职成功"
	  		}else if(val=="4"){
	  			return "入职失败"
	  		}
	  	  }
	  },
	  watch: {
	   
	  }
	};
</script>

<style scoped>
	.message_box {
		background-color: #FFFFFF;
		margin-top: 8px;
		padding: 12px 16px 0 16px ;
		position: relative;
	}
	.constract_box {
		margin-top: 16px;
		display: flex;
		align-items: center;
	}
	.constract_img {
		margin-left: auto;
	}
	.constract_img image {
		width: 24px;
		height: 24px;
		margin-left: 8px;
	}
	.job_name {	
		width: 70%;
		margin-bottom: 10px;
		color: #333333;
		font-size: 17px;
		font-weight: bold;
	}
	.money {
		color: #07C160;
		font-size: 15px;
		font-weight: bold;
		line-height: 31px;
	}
	.add_time {
		border-top: 1px solid #F5F5F5;
		margin-top: 8px;
		padding: 8px 0 8px;
		text-align: right;
		color: #999999;
	}
	.status {
		position: absolute;
		right: 16px;
		top: 16px;
		/* color: #07C160; */
		font-size: 15px;
		font-weight: bold;
	}
	.close {
		height: 50px;
		width: 100%;
		background: #0AC770;
		opacity: 1;
		border-radius: 25px;
		text-align: center;
		line-height: 50px;
		margin-top: 32px;
		color: #FFFFFF;
		font-size: 17px;
	}
</style>
